<template>
  <div
    class="m-wrap"
    :style="{ paddingLeft: paddingWidth + 'px'}"
  >
    <el-breadcrumb
      class="m-breadcrumb"
      separator="/"
    >
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="m-container">
      <!-- filter -->
      <el-form
        class="m-filter"
        inline
      >
        <el-form-item>
          <el-date-picker
            v-model="dateValue"
            size="small"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChange"
            format="yyyy / MM / dd"
            :picker-options="$store.state.pickerOptions2"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            size="small"
            v-model="customer_items.model_value"
            :placeholder="customer_items.placeHolder"
            @change="select('1',customer_items.model_value)"
            filterable
          >
            <el-option
              v-for="item in customer_items.options"
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="proModelValue"
            size="small"
            :placeholder="pro_items.placeHolder"
            @change="select('2',proModelValue)"
          >
            <el-option
              v-for="item in pro_items.options"
              :key="item.id"
              :label="item.productName"
              :value="item.customerProductCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="small"
            v-model="channelPro_items.model_value"
            :disabled="multipleStatus"
            :placeholder="channelPro_items.placeHolder"
            @change="select('3',channelPro_items.model_value)"
            filterable
          >
            <el-option
              v-for="item in channelPro_items.options"
              :key="item.productPackageCode"
              :label="item.productChannelCode"
              :value="item.productPackageCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="small"
            v-model="channel_items.model_value"
            :disabled="multipleStatus"
            :placeholder="channel_items.placeHolder"
            @change="select('4',channel_items.model_value)"
          >
            <el-option
              v-for="item in channel_items.options"
              :key="item.channelProductCode"
              :label="item.channelName"
              :value="item.channelProductCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        class="m-filter"
        inline
      >
        <el-form-item>
          <el-input
            v-model="value"
            size="small"
            class="u-w300"
            placeholder="请输入上游渠道号"
            @keyup.enter.native="search()"
          >
            <el-button
              slot="append"
              size="small"
              @click="search()"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-upload
            size="small"
            :action="apiUrl.uploadData"
            :with-credentials="true"
            :on-success="handleSuccess"
            :beforeUpload="beforeAvatarUpload"
            :onError="uploadError"
            :show-file-list="false"
            :file-list="fileList"
          >
            <el-button size="small">导入数据</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            @click.stop="importData"
          >导出数据</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="mulDelete"
          >删除</el-button>
        </el-form-item>
      </el-form>

      <!-- table -->
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          v-for="c in table_column"
          :key="c.prop"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          :formatter="c.format"
          :width="c.width"
          min-width="100"
          v-show="c.visible"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="调账激活"
          min-width="150"
          v-if="activationVisible"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.dataTime!='总计'">
              <el-input
                type="number"
                :value="scope.row.adjustmentAct"
                @change="scope.row.zip=changeInput($event)"
              ></el-input>
              <i @click="exitInput(scope.row.id,scope.row.zip)"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          v-for="c in table_column_"
          :key="c.prop"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          :formatter="c.format"
          min-width="100"
          v-show="c.visible"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="100"
          min-width="100"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.validStatus == 'button'"
              @click="checkAllEvent"
            >{{checkAll ? '全选' : '取消全选'}}</span>
            <el-checkbox
              v-else
              v-model="scope.row.validStatus"
            ></el-checkbox>
          </template>
        </el-table-column>
      </el-table>

      <!-- pagination -->
      <el-pagination
        class="m-pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.currentPage"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, prev, pager, next, sizes"
        :total="page.count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import "@/style/common.scss";
export default {
  data() {
    return {
      proModelValue: [],
      fileList: [],
      loading: false,
      multipleStatus: false,
      visibleMenuSelectStatus: false,
      activationVisible: false,
      importTitleStatus: false,
      importTitleTxt: "",
      checkedCities: [
        "日期",
        "产品名称",
        "上游渠道号",
        "产品包渠道代码",
        "预估激活",
        "结算激活",
        "留存率",
        "渠道名称",
        "客户名称"
      ],
      cities: [
        "日期",
        "产品名称",
        "上游渠道号",
        "康远渠道号",
        "产品包渠道代码",
        "预估激活",
        "结算激活",
        "调账激活",
        "留存率",
        "数据属性",
        "渠道名称",
        "客户名称",
        "客户ID"
      ],
      citiesFilterVal: [
        "dataTime",
        "productName",
        "productChannelCode",
        "kyChannelName",
        "channelProductCode",
        "expectedAct",
        "settlementAct",
        "adjustmentAct",
        "retention",
        "dataType",
        "channelName",
        "customerName",
        "id"
      ],
      table_column: [
        {
          fixed: true,
          prop: "dataTime",
          label: "日期",
          sortable: true,
          visible: true
        },
        {
          fixed: false,
          prop: "customerName",
          label: "客户名称",
          sortable: false,
          visible: true,
          width: 150
        },
        {
          fixed: false,
          prop: "id",
          label: "客户ID",
          sortable: false,
          visible: false
        },
        {
          fixed: false,
          prop: "productName",
          label: "产品名称",
          sortable: false,
          visible: true,
          width: 150
        },
        {
          fixed: false,
          prop: "productChannelCode",
          label: "上游渠道号",
          sortable: false,
          visible: true,
          width: 280
        },
        {
          fixed: false,
          prop: "kyChannelName",
          label: "康远渠道号",
          sortable: false,
          visible: false,
          width: 200
        },
        //                    {fixed: false, prop: 'channelProductCode', label: '产品包渠道代码', sortable: false, visible: true,width:150},
        {
          fixed: false,
          prop: "channelName",
          label: "渠道名称",
          sortable: false,
          visible: true,
          width: 150
        },
        {
          fixed: false,
          prop: "expectedAct",
          label: "预估激活",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "settlementAct",
          label: "结算激活",
          sortable: false,
          visible: true
        }
      ],
      table_column_: [
        {
          fixed: false,
          prop: "retention",
          label: "留存率",
          sortable: false,
          visible: true,
          format: function(row, col) {
            if (row.dataTime != "总计") {
              return row.retention + "%";
            } else {
              return "";
            }
          }
        },
        {
          fixed: false,
          prop: "dataType",
          label: "数据属性",
          sortable: false,
          visible: false
        }
      ],
      page: {
        sizes: [100, 500, 1000, 5000],
        offset: 1,
        limit: 100,
        count: 0,
        currentPage: 1
      },
      menu_nav: ["CPA数据管理", "实时数据"],
      tableData: [],
      dateValue: "",
      customer_items: {
        model_value: "",
        placeHolder: "客户",
        options: []
      },
      pro_items: {
        model_value: "",
        placeHolder: "产品",
        options: []
      },
      channelPro_items: {
        model_value: "",
        placeHolder: "上游渠道号",
        options: []
      },
      channel_items: {
        model_value: "",
        placeHolder: "渠道",
        options: []
      },
      params: {
        type: "",
        val: "",
        startDate: "",
        endDate: ""
      },
      value: "",
      isSearch: false,
      checkAll: true,
      idList: []
    };
  },
  computed: {
    paddingWidth() {
      return this.$store.state.paddingWidth;
    }
  },
  created() {
    this.customerSelect();
    this.pageInfo();
  },
  methods: {
    customerSelect() {
      /*客户*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerSearch,
        params: {
          offset: 1,
          limit: 9999,
          val: ""
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.customer_items.options = data.items;
          }
        })
        .catch(error => {
        });
    },
    proInfo() {
      /*产品*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerProListLight,
        params: {
          customerCode: this.customer_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.pro_items.options = data.items;
            this.proModelValue = [];
          }
        })
        .catch(error => {
        });
    },
    channelProInfo() {
      /*上游渠道号*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerProSearch,
        params: {
          offset: 1,
          limit: 9999,
          type: 2,
          code: this.proModelValue.join("|")
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.channelPro_items.options = data.items;
            this.channelPro_items.model_value = "";
          }
        })
        .catch(error => {
        });
    },
    channelInfo() {
      /*投放渠道*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProSearch,
        params: {
          offset: 1,
          limit: 9999,
          type: 4,
          code: this.channelPro_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.channel_items.options = data.items;
            this.channel_items.model_value = "";
          }
        })
        .catch(error => {
        });
    },
    select(type, val) {
      if (val != "") {
        this.params.type = type;
        this.params.val = val;
        switch (type) {
          case "1":
            this.proInfo();
            break;
          case "2":
            this.params.val = val.join("|");
            if (val.length <= 1) {
              this.multipleStatus = false;
              this.channelProInfo();
            } else {
              this.multipleStatus = true;
            }
            break;
          case "3":
            this.channelInfo();
            break;
        }
        this.sql();
      }
    },
    //搜索
    search() {
      if (!this.value) {
        this.$message({
          type: "info",
          message: "请输入上游渠道号"
        });
      } else {
        this.isSearch = true;
        this.pageInfo();
      }
    },
    //查询
    sql() {
      this.isSearch = false;
      this.pageInfo();
    },
    pageInfo() {
      this.loading = true;
      this.$http({
        method: "get",
        url: this.apiUrl.realtimeSearch,
        params: {
          curPage: this.page.offset,
          limit: this.page.limit,
          type: this.isSearch ? "5" : this.params.type,
          searchKey: this.value,
          sDataTime: this.params.startDate,
          eDataTime: this.params.endDate
        }
      })
        .then(res => {
          this.loading = false;
          if (res.status === 200) {
            this.page.count = res.data.totalNums;
            for (let row of res.data.list) {
              row.validStatus = false;
            }
            this.tableData = res.data.list;
            if (this.tableData.length > 0) {
              this.tableData.unshift({
                dataTime: "总计",
                settlementAct: res.data.settlementActTotal,
                validStatus: "button"
              });
            }
            this.checkAll = true;
            this.idList = [];
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    handleCurrentChange(val) {
      this.page.offset = val;
      this.pageInfo();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.pageInfo();
    },
    checkedChange() {
      let flag = this.checkedCities.indexOf("调账激活");
      flag >= 0
        ? (this.activationVisible = true)
        : (this.activationVisible = false);
      const newArr = this.table_column.concat(this.table_column_);
      for (let item of newArr) {
        var index = this.checkedCities.indexOf(item.label);
        index >= 0 ? (item.visible = true) : (item.visible = false);
      }
    },
    changeCheckStatus(e) {
      e.stopPropagation();
      this.visibleMenuSelectStatus = !this.visibleMenuSelectStatus;
    },
    handleSuccess(response, file, fileList) {
      this.importTitleTxt = response.msg;
      this.importTitleStatus = true;
    },
    // 上传错误
    uploadError(err, file, fileList) {
      this.$message({
        type: "error",
        message: "上传失败，请重试"
      });
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      var fileName = file.name.split(".");
      var fileNameLen = fileName.length - 1;
      const extension = fileName[fileNameLen] === "csv";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!extension) {
        this.$message({
          type: "info",
          message: "上传渠道包只能是 csv 格式"
        });
      }
      if (!isLt2M) {
        this.$message({
          type: "info",
          message: "上传包大小不能超过 2MB"
        });
      }
      return extension && isLt2M;
    },
    bodyEvent() {
      this.visibleMenuSelectStatus = false;
    },
    preventDefault(e) {
      e.stopPropagation();
    },
    changeInput(e) {
      return e;
    },
    exitInput(id, val) {
      if (!val) {
        this.$message({
          type: "info",
          message: "您还没有修改调账激活"
        });
      }
      this.$http({
        method: "put",
        url: this.apiUrl.realtimeUpdateAct,
        params: {
          id: id,
          act: val
        }
      })
        .then(res => {
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "修改成功"
            });
          }
        })
        .catch(err => {});
    },
    exitImportTitle() {
      this.importTitleStatus = false;
      this.pageInfo();
    },
    dateChange() {
      this.params.startDate = this.formatDateTime(this.dateValue[0], "y-m-d");
      this.params.endDate = this.formatDateTime(this.dateValue[1], "y-m-d");
      this.sql();
    },
    importData() {
      if (this.tableData.length == 0) {
        this.$message({
          type: "info",
          message: "请查询数据"
        });
        return false;
      }
      let tHeader = this.cities;
      let filterVal = this.citiesFilterVal;
      let importData = this.tableData;
      let searchName = [
        this.params.startDate,
        this.params.endDate,
        this.value,
        "实时数据"
      ];
      let sqlName = [
        this.params.startDate,
        this.params.endDate,
        this.customer_items.model_value,
        this.proModelValue.join("|"),
        this.channelPro_items.model_value,
        this.channel_items.model_value,
        "实时数据"
      ];
      let fileName = (this.isSearch ? searchName : sqlName).join("_");
      this.handleDownload(tHeader, filterVal, importData, fileName);
    },
    deleteBill(id) {
      this.$confirm("此操作将永久删除当前行, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            method: "delete",
            url: this.apiUrl.realtimeDelete,
            params: { id: id }
          })
            .then(res => {
              if (res.status == 200) {
                if (res.data.status == 1) {
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  this.pageInfo();
                } else {
                  this.$message({
                    type: "error",
                    message: res.data.msg
                  });
                }
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!"
                });
              }
            })
            .catch(error => {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    mulDelete() {
      this.idList = [];
      for (let item of this.tableData) {
        item.validStatus && item.validStatus != "button"
          ? this.idList.push(item.id)
          : null;
      }
      if (this.idList.length == 0) {
        this.$message({
          type: "info",
          message: "请选择需要删除的行"
        });
        return false;
      }
      this.$confirm("此操作将永久删除所选行, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            method: "delete",
            url: this.apiUrl.realtimeBatch_del,
            params: { ids: this.idList.join(",") }
          })
            .then(res => {
              let list = [];
              if (res.data) list = res.data.list;
              let html = "";
              list.forEach((item, index) => {
                html += `<p class="${
                  item.status == 1 ? "delSuc" : ""
                }"><span class="tipId">ID：${
                  item.id
                }</span><span class="tipStatus">状态：${
                  item.status == 1 ? "删除成功" : "删除失败"
                }</span><span class="tipMemo">备注：${item.msg}</span></p>`;
              });
              this.importTitleTxt = html;
              this.importTitleStatus = true;
            })
            .catch(error => {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    /*全选事件*/
    checkAllEvent() {
      let flag = true;
      for (let item of this.tableData) {
        if (item.validStatus != "button") {
          item.validStatus = this.checkAll;
          flag = false;
        }
      }
      if (flag) return false;
      this.checkAll = !this.checkAll;
    }
  }
};
</script>
